<style scoped>
.page {
  display: flex;
  justify-content: center;
}
.container {
  width: 678px;
  display: flex;
  flex-direction: column;
}
.content {
  padding: 32px;
  margin-top: 24px;
  border-radius: 16px;
  background-color: #fff;
}
.config-item {
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.limit_container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
}
.data_container {
  display: flex;
  flex-direction: column;
}
.data_container > .item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-block: 10px;
}
.data_container > .item > .number {
  display: flex;
  flex-direction: row;
  font-size: 24px;
  align-items: center;
}
.top-title {
  font-size: 32px;
}
.title {
  font-size: 20px;
  margin-bottom: 4px;
}
.semibold {
  font-weight: bold;
}
.c_n500 {
  color: #5f717b;
}
.image {
  width: 24px;
  height: 24px;
  margin-left: 8px;
}
.el-button--medium {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 4px;
}
.line {
  height: 1px;
  background-color: #e3e7ea;
  margin-top: 16px;
}
.input_container {
  display: flex;
  flex-direction: column;
}
.edit_card {
  display: flex;
  justify-content: space-between;
}
.edit_item {
  width: 45%;
}
.edit_item > .tips {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 8px;
}
.input {
  margin-top: 24px;
}
.store_btn {
  width: 120px;
  height: 56px;
  margin-top: 24px;
  font-size: 16px;
}
</style>

<template>
  <div class="page">
    <div class="container">
      <div class="top-title semibold">個人資料</div>
      <div class="content">
        <div class="config-item">
          <div class="limit_container">
            <div class="left_container">
              <div class="title semibold">姓名</div>
            </div>
            <el-button
              type="danger"
              link
              class="el-button--medium"
              @click="editToken(1)"
            >
              更改
            </el-button>
          </div>
          <div class="data_container">
            <div class="item">
              <div class="medium c_n500">{{ dataList.account }}</div>
            </div>
          </div>
          <div v-if="id == 1" class="input_container">
            <div class="edit_card">
              <div class="edit_item">
                <el-input
                  v-model="userInfo.newAccount"
                  placeholder="名字"
                  clearable
                  size="large"
                  class="input"
                />
              </div>
            </div>
            <el-button type="danger" class="store_btn" @click="save">
              儲存
            </el-button>
          </div>
        </div>
        <div class="line"></div>
        <div class="config-item">
          <div class="limit_container">
            <div class="left_container">
              <div class="title semibold">電子郵箱</div>
            </div>
            <el-button
              type="danger"
              link
              class="el-button--medium"
              @click="editToken(2)"
            >
              更改
            </el-button>
          </div>
          <div class="data_container">
            <div class="item">
              <div class="medium c_n500">{{ dataList.email }}</div>
            </div>
          </div>
          <div v-if="id == 2" class="input_container">
            <div class="edit_card">
              <el-input
                v-model="userInfo.newEmail"
                placeholder="電子郵箱"
                clearable
                size="large"
                class="input"
              />
            </div>
            <el-button type="danger" class="store_btn" @click="save">
              儲存
            </el-button>
          </div>
        </div>
        <div class="line"></div>
        <div class="config-item">
          <div class="limit_container">
            <div class="left_container">
              <div class="title semibold">密碼</div>
            </div>
            <el-button
              type="danger"
              link
              class="el-button--medium"
              @click="editToken(3)"
            >
              更改
            </el-button>
          </div>
          <div class="data_container">
            <div class="item">
              <div class="medium c_n500">******</div>
            </div>
          </div>
          <div v-if="id == 3" class="input_container">
            <div class="">
              <el-input
                v-model="userInfo.newpwd"
                placeholder="输入新密码"
                type="password"
                show-password
                size="large"
                class="input"
              />
              <el-input
                v-model="userInfo.oldpwd"
                placeholder="确认新密码"
                type="password"
                show-password
                size="large"
                class="input"
              />
            </div>
            <el-button type="danger" class="store_btn" @click="save">
              儲存
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import { ElMessage } from "element-plus";
export default {
  name: "userList",
  data() {
    return {
      searchParam: {
        id: "",
        status: "",
        type: 1,
      },
      dataList: {},
      page: 1,
      pageSize: 20,
      dataTotal: 0,
      input: "",
      id: "",
      userInfo: {},
    };
  },
  created() {
    this.getDataList();
  },
  methods: {
    async save() {
      if (this.id == 1) {
        if (!this.userInfo.newAccount) {
          ElMessage.error("请输入账号！");
          return;
        }
        const res = await request.PUT("/sys/sys_user/update-account", {
          account: this.userInfo.newAccount,
        });
        if (res.status == 100100) {
          this.getDataList();
          ElMessage.success("储存成功！");
        } else {
          ElMessage.error(res.message);
        }
        this.$emit("updateUser");
      } else if (this.id == 2) {
        if (!this.userInfo.newEmail) {
          ElMessage.error("请输入邮箱！");
          return;
        }
        const res = await request.PUT("/sys/sys_user/update-account", {
          email: this.userInfo.newEmail,
        });
        if (res.status == 100100) {
          this.getDataList();
          ElMessage.success("储存成功！");
        } else {
          ElMessage.error(res.message);
        }
        this.$emit("updateUser");
      } else {
        if (!this.userInfo.newpwd) {
          ElMessage.error("请输入新密码！");
          return;
        }
        if (!this.userInfo.oldpwd) {
          ElMessage.error("请输入旧密码！");
          return;
        }
        const res = await request.PUT("/sys/sys_user/update-account", {
          password: this.userInfo.newpwd,
        });
        if (res.status == 100100) {
          this.getDataList();
          ElMessage.success("储存成功！");
        } else {
          ElMessage.error(res.message);
        }
        this.$emit("updateUser");
      }
    },
    async getDataList() {
      const res = await request.GET("/sys/sys_user/info", {
        account: localStorage.getItem("username"),
        password: localStorage.getItem("password"),
      });
      if (res.status == 100100) {
        this.dataList = res.data;
      }
    },
    editToken(num) {
      this.id = num;
    },
  },
};
</script>
